<template>
  <el-container>
    <el-header>
      <h1 style="text-align: center; color: #556B2F;">宋曲页面</h1>
    </el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <img src="https://example.com/song_poetry_style.jpg" alt="宋词风格图片" style="width: 100%;">
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <h2>宋词诗人数据</h2>
            <div ref="chart" style="width: 100%; height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card shadow="hover">
            <h2>宋词知识科普</h2>
            <p>宋词是中国宋代盛行的一种文学体裁，有多种词牌，如《水调歌头》《声声慢》等。</p>
          </el-card>
        </el-col>
      </el-row>
      <el-col v-for="poem in poems" :key="poem.title" :span="8">
        <el-card shadow="hover">
          <h2>{{ poem.title }}</h2>
          <p>{{ poem.author }}</p>
          <p>{{ poem.content }}</p>
          <el-button type="text" @click="showDetails(poem)">查看详情</el-button>
        </el-card>
      </el-col>
      <el-dialog v-model="dialogVisible" title="宋词详情">
        <h2>{{ currentPoem.title }}</h2>
        <p>{{ currentPoem.author }}</p>
        <p>{{ currentPoem.content }}</p>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const poems = ref([
  { title: '水调歌头·明月几时有', author: '苏轼', content: '明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。' },
  { title: '声声慢·寻寻觅觅', author: '李清照', content: '寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更加细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！' },
  { title: '满江红·怒发冲冠', author: '岳飞', content: '怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切！靖康耻，犹未雪。臣子恨，何时灭！驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。' },
  { title: '如梦令·常记溪亭日暮', author: '李清照', content: '常记溪亭日暮，沉醉不知归路。兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭。' },
  { title: '破阵子·为陈同甫赋壮词以寄之', author: '辛弃疾', content: '醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生！' },
  { title: '江城子·乙卯正月二十日夜记梦', author: '苏轼', content: '十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。' },
  { title: '清平乐·留人不住', author: '晏几道', content: '留人不住，醉解兰舟去。一棹碧涛春水路，过尽晓莺啼处。渡头杨柳青青，枝枝叶叶离情。此后锦书休寄，画楼云雨无凭。' },
  { title: '西江月·夜行黄沙道中', author: '辛弃疾', content: '明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。七八个星天外，两三点雨山前。旧时茅店社林边，路转溪桥忽见。' }
]);

const dialogVisible = ref(false);
const currentPoem = ref({});

const showDetails = (poem) => {
  currentPoem.value = poem;
  dialogVisible.value = true;
};

const chart = ref(null);

onMounted(() => {
  const myChart = echarts.init(chart.value);
  const option = {
    title: { text: '宋词作者诗词数量' },
    tooltip: {},
    xAxis: { data: ['苏轼', '李清照', '岳飞'] },
    yAxis: {},
    series: [{
      name: '数量',
      type: 'bar',
      data: [1, 1, 1]
    }]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
/* 这里可以添加样式 */
</style>